<style lang="less">
     @import './index.less';
</style>

<template>
  <div>
    <Card dis-hover>
      <Row class="margin-bottom-10">
        <i-col span="20" class="margin-bottom-5">
          <Input placeholder="客户名称" size="small" style="width: 200px" v-model="customer_name"></Input>
          <Button class="margin-right-5" type="primary" size="small" icon="ios-search" @click="search">搜索</Button>
        </i-col>
        <i-col span="4">
            <add-btn class="pull-right" @addclick="addHandle"></add-btn>
        </i-col>
      </Row>
      <h3>未抽象组件的table</h3>
      <Table :columns="tableColumns" :data="customerList.data"></Table>
      <h3>已抽象组件的table</h3>
      <can-edit-table v-model="customerList.data" :columns-list="tableData.tableColumns"></can-edit-table>
      <Page :current="currentPage" :total="customerList.totalCount" :page-size="pageSize" show-total @on-change="changePage"></Page>
    </Card>
    <Modal v-model="modalControl"  width="1000" 
      :title="modalTitle"
      :ok-text= okText
      :loading="loading"
      @on-ok="submit('formValidate')"
      @on-cancel="cancel('formValidate')">
      <Form :model="modalForm" ref="formValidate" :rules="tableData.ruleValidate" :label-width="110" label-position="right">
        <Row>
          <i-col span="16" offset="4">
            <FormItem label="客户名称" prop="customer_name">
                <Input v-model="modalForm.customer_name" placeholder="请输入客户名称" @on-change="inputChange" :disabled="isDisabled"></Input>
                <div v-show="checked" class="ivu-form-item-error-tip">客户名称存在，请重新输入</div>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="16" offset="4">
            <FormItem label="纳税人识别号" prop="tax_num">
                <Input v-model="modalForm.tax_num"></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="16" offset="4">
            <FormItem label="地址" prop="address">
                <Input v-model="modalForm.address"></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="16" offset="4">
            <FormItem label="电话" prop="phone_num">
                <Input v-model="modalForm.phone_num" ></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="16" offset="4">
            <FormItem label="开户账号" prop="bank_account">
                <Input v-model="modalForm.bank_account"></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="16" offset="4">
            <FormItem label="开户行" prop="bank">
                <Input v-model="modalForm.bank"></Input>
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
import addBtn from './component/access-add-button.vue';
import deleteBtn from './component/access-delete-button.vue';
import modifyBtn from './component/access-modify-button.vue';
import tableData from './table_data.js';
import canEditTable from './canEditTable.vue';

export default {
    components: {
      addBtn,
      deleteBtn,
      modifyBtn,
      canEditTable
    },
    data () {
      return {
        modalControl:false,
        loading:true,
        checked:false,
        isDisabled:false,
        okText:'',
        modalTitle:'',
        customerList:[],
        customer_name:'',
        pageSize:15,
        currentPage:1,
        modalForm:{},
        tableColumns:[
          {
            title:'序号',
            type:'index',
            align:'center',
          },
          {
            title:'客户名称',
            key:'customer_name',
            align:'center',
          },
          {
            title:'纳税人识别号',
            key:'tax_num',
            align:'center',
          },
          {
            title:'地址',
            key:'address',
            align:'center',
          },
          {
          title: '操作',
          align: 'center',
          render: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '详细信息'
                  }
                }, [h('Button', {
                  props: {
                    size: 'small',
                    icon: 'qr-scanner',
                    type: 'text'
                  },
                  on: {
                    click: () => {
                      //this.showHandle(params.row);
                      this.$router.push({
                        name:'customer_company-mgt-detail',
                        params:{id:params.row.customer_id}
                      })
                    }
                  }
                })]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '编辑'
                  }
                }, [h(modifyBtn, {
                  on: {
                    modifyClick: () => {
                      this.modifyHandle(params.row);
                    }
                  }
                }
                )]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '删除'
                  }
                }, [h(deleteBtn, {
                  on: {
                    delclick: () => {
                      this.$Modal.confirm({
                        title: '确认',
                        content: '确认要删除客户【' + params.row.customer_name + '】吗？',
                        onOk: () => {
                          this.remove(params.row.customer_id);
                        }
                      });
                    }
                  }
                })])
              ]);
            }
        }],
        tableData:[],
      }
    },
    methods: {
      getCustomers() {
        this.$http.get('/customer/customers/page?customer_name='+this.customer_name+'&pageSize='+this.pageSize+'&currentPage='+this.currentPage).then((res) => {
          this.customerList = res.data.returnValue
        })
      },
      inputChange() {
        this.checked = false
      },
      addHandle() {
        this.okText = "确定"
        this.modalTitle = "添加客户"
        this.modalControl = true
      },
      modifyHandle(info) {
        this.modalTitle = "修改客户信息"
        this.okText = '保存'
        this.isDisabled = true
        this.modalForm = _.cloneDeep(info)
        this.modalControl = true
      },
      submit(name) {
        this.$refs[name].validate((valid) => {
          // 验证表单
          if(valid) {
            // 新建
            if(!this.modalForm.customer_id) {
              // 验证查重
              this.$http.post('customer/customer/checkname',{customer_name:this.modalForm.customer_name}).then((res) => {
                if(res.data.success) {
                  this.$http.post('/customer/customer',this.modalForm).then((res) => {
                    this.$Message.success(res.data.message)
                    this.modalControl = false
                    this.getCustomers()
                    this.cleanParmas(name)
                  }).catch(() => {
                    this.reloading()
                    this.$Message.error('添加失败，请稍后重试！')
                  })
                }else {
                  this.checked = !res.data.success
                  this.reloading()
                }
              })
            // 修改
            }else {
              this.$http.put('/customer/customer',this.modalForm).then((res) => {
                this.$Message.success(res.data.message)
                this.modalControl = false
                this.cleanParmas(name)
                this.getCustomers()
              }).catch(() => {
                tihs.reloading()
                this.$Message.error('修改失败，请稍后重试！')
              })
            }
          }else {
            this.reloading()
          }
        })
      },
      reloading() {
        this.loading = false
        this.$nextTick(() => {
            this.loading = true;
        })
      },
      showHandle(info) {
        this.$router.push({
          name:'customer_company-mgt-detail',
          query:info
        })
      },
      remove(id) {
        this.$http.delete('/customer/customer/' + id).then((res) => {
          this.$Message.success('删除成功！')
          this.getCustomers()
        }).catch(() => {
          this.$Message.error('删除失败，请稍后重试！')
        })
      },
      cleanParmas(name) {
        this.modalForm = {}
        this.checked = false
        this.isDisabled = false
        this.$refs[name].resetFields();
      },
      cancel(name) {
        this.cleanParmas(name)
      },
      search() {
        this.getCustomers()
      },
      changePage(page) {
        this.currentPage = page
        this.getCustomers()
      }
    },
    mounted() {
      this.getCustomers()
    },
    created () {
      this.tableData = tableData
    }
}
</script>

